<!-- eslint-disable no-undef -->
<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { userUpdateService } from '@/api/user'

const { user: { id, username, nickname, email }, getUser } = useUserStore()

const userForm = ref({
    id,
    username,
    nickname,
    email
})
const userRef = ref()

// 数据校验
const rules = ref({
    nickname: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        { pattern: /^\S{2,10}$/, message: '昵称为2-10个非空字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
    ]
})

// 更新用户信息提交事件
const onForm = async () => {
    // 规则校验
    await userRef.value.validate()
    // 发送请求更新用户信息
    await userUpdateService(userForm.value)
    // 通知user模块进行数据更新
    getUser()
    ElMessage.success('更新成功')
    
}

</script>
<template>
    <page-container title="个人详情">
        <el-form ref="userRef" :model="userForm" :rules="rules" class="my-info">
            <el-form-item label="登录名称" porp="username">
                <el-input v-model="userForm.username" style="width: 50%;" disabled="false"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
                <el-input v-model="userForm.nickname" style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
                <el-input v-model="userForm.email" style="width: 50%;"></el-input>
            </el-form-item>
            <el-button type="primary" @click="onForm">提交修改</el-button>
        </el-form>
    </page-container>
</template>
<style lang="scss" scoped>
.my-info {
    padding: var(--el-card-padding);
    font-size: 14px ;
}
</style>